<template>
  <div class="frame" :style="{ paddingLeft }">
    <!-- 左侧菜单栏 -->
    <MenuLeft ref="MenuLeft" :menuOpen="menuOpen"></MenuLeft>

    <!-- 顶栏菜单 -->
    <TopBar
      :menuOpen="menuOpen"
      @visibleMenu="visibleMenu"
      @personalityShow="personalityShow"
    >
      <!-- 顶栏标签路由 -->
      <WorkTab />
    </TopBar>

    <!-- 主体区域 -->
    <div class="container">
      <router-view v-slot="{ Component }">
        <transition name="router-fade" mode="out-in">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </div>

    <!-- 个性化设置 -->
    <Personality
      @click="personalityShow"
      :show="showpersonality"
      @closePersonality="closePersonality"
    ></Personality>
  </div>
</template>

<script lang="ts">
import { useAppStore } from "@/storePinia/index";
// import { useRoute } from "vue-router";
import { onMounted, reactive, toRaw, ref, toRefs, computed } from "vue";
export default {
  name: "Home",
  setup() {
    // const route = useRoute();
    const MenuLeft = ref(null);
    const state: any = reactive({
      // 菜单栏是否展开
      menuOpen: true,
      // 个性化设置抽屉可见性
      showpersonality: false,
      usersetting: computed(() => useAppStore().setting),
      Worktab: computed(() => useAppStore().worktab),
      paddingLeft: computed(() => {
        return state.menuOpen ? "250px" : "70px";
      }),
    });
    onMounted(() => {
      initsetting();
      openedrouter();
    });
    // 初始化用户的个性设置 这个如果有后端接口之后得改
    const initsetting = () => {
      // 这里是判断localstorage中是否有usersetting
      if (window.localStorage.getItem("usersetting")) {
        // 存在得话将localstorage中得值取下来赋值给vuex中的usersetting
        let that = JSON.parse(localStorage.getItem("usersetting") || "{}");
        useAppStore().setUpTheme(that.theme);
        useAppStore().setLeftMenuUniqueOpened({
          show: that.uniqueOpened,
        });
        useAppStore().setLeftMenuButton({
          show: that.menuButton,
        });
        useAppStore().setLeftMenuCrumbs({
          show: that.showCrumbs,
        });
        useAppStore().setThemeModel(that.themeModel);
        useAppStore().setshowAvatar({
          show: that.showAvatar,
        });
      } else {
        // 这是用户localstorage中没有usersetting才会被调用
        window.localStorage.setItem(
          "usersetting",
          JSON.stringify(toRaw(useAppStore().setting))
        );
      }
    };
    // 用户已打开路由保存在sessionstorage，防止刷新丢失
    const openedrouter = () => {
      let info = window.sessionStorage.getItem("worktab")
        ? JSON.parse(window.sessionStorage.getItem("worktab"))
        : {
            current: { name: "数据概览", path: "/Home/PersonalHomePage" },
            opened: [{ name: "数据概览", path: "/Home/PersonalHomePage" }],
          };
      useAppStore().worktabinitState(info);
    };
    // 菜单栏展开收缩
    const visibleMenu = () => {
      state.menuOpen = !state.menuOpen;
      MenuLeft.value.visibleMenu();
    };
    // 展开个性化设置抽屉
    const personalityShow = () => {
      state.showpersonality = !state.showpersonality;
    };
    // 关闭个性化抽屉
    const closePersonality = () => {
      state.showpersonality = false;
    };
    return {
      ...toRefs(state),
      // store,
      MenuLeft,
      initsetting,
      openedrouter,
      visibleMenu,
      personalityShow,
      closePersonality,
    };
  },
};
</script>

<style lang="scss" scoped>
.frame {
  $default-background: #f6f7f9;
  width: 100%;
  padding: 115px 0 15px 0;
  box-sizing: border-box;
  transition: padding 0.3s ease-in-out;
  min-height: 100vh;
  overflow: hidden;
  background: $default-background;

  .container {
    width: calc(100% - 30px);
    min-height: 100%;
    margin: auto;
    box-sizing: border-box;

    // 子页面默认style
    >>> .page-content {
      min-height: calc(100vh - 120px);
      background: #fff;
      padding: 16px;
      position: relative;
      box-sizing: border-box;
      border-radius: 3px;

      >>> .open-head-btn {
        width: 100%;
        height: 15px;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 999;
        text-align: center;
        font-size: 12px;
        color: #eee;
      }
    }
  }
}
// 路由过渡动画
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  height: 150%;
  opacity: 0;
}
::-webkit-scrollbar {
  display: none;
}
</style>
